<%--
  Created by IntelliJ IDEA.
  User: 王旭东
  Date: 2024/12/20
  Time: 12:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>团队展示</title>
    <style>
        /* 设置背景图片 */
        body {
            font-family: Arial, sans-serif;
            background-image: url('${pageContext.request.contextPath}/static/images/chengbao.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 0;
        }

        /* 容器样式，居中显示 */
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 50px auto;
            background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            animation: fadeIn 2s ease-in-out;
        }

        /* 表格样式 */
        table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
            border-collapse: separate;
            border-spacing: 0;
            animation: fadeIn 2s ease-in-out;
        }

        table.table-bordered td, table.table-bordered th {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }

        /* 表格条纹效果 */
        .table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
            background-color: #f9f9f9;
        }

        /* 表格悬停效果 */
        .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
            background-color: #e0e0e0;
        }

        /* 头像样式 */
        .mySize {
            width: 60px;
            height: 60px;
            transition: transform 0.3s ease;
        }

        /* 头像悬停放大效果 */
        .img-avatar:hover {
            transform: scale(1.2);
        }

        /* 按钮样式 */
        .modal-footer a {
            display: inline-block;
            padding: 10px 20px;
            margin-top: 20px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .modal-footer a:hover {
            background-color: #0056b3;
        }

        /* 动画关键帧 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .mySize {
                width: 50px;
                height: 50px;
            }

            .modal-footer a {
                padding: 8px 16px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <form action="${pageContext.request.contextPath}/user/team" method="post">
        <table class="table table-bordered table-striped table-hover" id="admin_table">
            <thead>
            <tr>
                <th>编号</th>
                <th>管理员账号</th>
                <th>密码</th>
                <th>真实姓名</th>
                <th>电话</th>
                <th>Email</th>
                <th>生日</th>
                <th>性别</th>
                <th>头像</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="admin" items="${adminList}">
                <tr>
                    <td>${admin.id}</td>
                    <td>${admin.adminName}</td>
                    <td>${admin.adminPwd}</td>
                    <td>${admin.realName}</td>
                    <td>${admin.telephone}</td>
                    <td>${admin.email}</td>
                    <td>${admin.birthday}</td>
                    <td>${admin.sex}</td>
                    <td><img class="mySize img-avatar" src="${pageContext.request.contextPath}/static/images/admin/${admin.pic}"/></td>
                    <td>${admin.remark}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <div class="modal-footer">
            <a href="${pageContext.request.contextPath}/user/team.jsp">返回中心</a>
        </div>
    </form>
</div>
</body>
</html>